import React, {Component} from 'react'
import {Row, Col} from 'antd'
import logo from '../images/logo.png'
import {Menu, Icon, Tabs, message, Form, Input, Button, Checkbox, Modal} from 'antd'
import {Link} from 'react-router-dom'

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

class PCHeader extends Component {

    constructor(props) {
        super(props)
        this.state = {
            current: 'top',
            modalVisible: false,
            action: 'login',
            isLogin: false,
            userNickName: '',
            userId: 0
        }
    }

    setModalVisible(value) {
        this.setState({
            modalVisible: value
        })
    }

    //菜单点击
    handleClick(e) {
        if (e.key == 'register') {
            this.setState({
                current: 'register',
            })
            this.setModalVisible(true)
        } else {
            this.setState({
                current: e.key
            })
        }
    }

    //表单提交
    handleSubmit(e) {
        e.preventDefault();
        var myFetchOptions = {
            method: 'GET',
        };
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                //执行提交
            }
        });
        // var formData = this.props.form.getFieldsValue()
        // console.log(formData)
    }

    //重复输入密码验证
    checkPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('r_password')) {
            callback('Two passwords that you enter is inconsistent!');
        } else {
            callback();
        }
    }
    //密码对比
    checkConfirm = (rule, value, callback) => {
        const form = this.props.form;
        if (value && this.state.confirmDirty) {
            form.validateFields(['r_confirmPassword'], { force: true });
        }
        callback();
    }

    render() {
        let {getFieldDecorator} = this.props.form;
        const userShow = this.state.isLogin ?
            <Menu.Item key="logout" className="register">
                <Button type="primary" htmlType="submit">{this.state.userNickName}</Button>
                &nbsp;&nbsp;
                <Link target="_blank">
                    <Button type="dashed" htmlType="button">个人中心</Button>
                </Link>
                &nbsp;&nbsp;
                <Link target="_blank">
                    <Button type="ghost" htmlType="button">退出</Button>
                </Link>
            </Menu.Item>
            :
            <Menu.Item key="register" className="register">
                <Icon type="appstore"/>注册/登录
            </Menu.Item>
        ;
        return (
            <header>
                <Row>
                    <Col span={2}></Col>
                    <Col span={4}>
                        <a href="/" className="logo">
                            <img src={logo} alt="logo"/>
                            <span>ReactNews</span>
                        </a>
                    </Col>
                    <Col span={16}>
                        <Menu
                            mode="horizontal"
                            selectedKeys={[this.state.current]}
                            onClick={this.handleClick.bind(this)}
                        >
                            <Menu.Item key="top">
                                <Icon type="appstore"/>头条
                            </Menu.Item>
                            <Menu.Item key="shehui">
                                <Icon type="appstore"/>社会
                            </Menu.Item>
                            <Menu.Item key="guonei">
                                <Icon type="appstore"/>国内
                            </Menu.Item>
                            <Menu.Item key="guoji">
                                <Icon type="appstore"/>国际
                            </Menu.Item>
                            <Menu.Item key="yule">
                                <Icon type="appstore"/>娱乐
                            </Menu.Item>
                            <Menu.Item key="tiyu">
                                <Icon type="appstore"/>体育
                            </Menu.Item>
                            <Menu.Item key="leji">
                                <Icon type="appstore"/>科技
                            </Menu.Item>
                            <Menu.Item key="shishan">
                                <Icon type="appstore"/>时尚
                            </Menu.Item>
                            {userShow}
                        </Menu>
                        <Modal
                            title="用户中心"
                            wrapClassName="vertical-center-modal"
                            visible={this.state.modalVisible}
                            onCancel={() => {
                                this.setModalVisible(false)
                            }}
                            onOk={() => {
                                this.setModalVisible(false)
                            }}
                            okText="关闭"
                        >
                            <Tabs defaultActiveKey="2">
                                <TabPane tab="注册" key="2">
                                    <Form layout="horizontal" onSubmit={this.handleSubmit.bind(this)}>
                                        <FormItem label="账户">
                                            {getFieldDecorator('r_username', {
                                                rules: [{required: true, message: '请输入您的账户!'}],
                                            })(
                                                <Input placeholder="请输入您的账户"/>
                                            )}
                                        </FormItem>
                                        <FormItem label="密码">
                                            {getFieldDecorator('r_password', {
                                                rules: [
                                                    {required: true, message: '请输入您的密码!'}
                                                ],
                                            })(
                                                <Input type="password" placeholder="请输入您的密码"/>
                                            )}
                                        </FormItem>
                                        <FormItem label="确认密码">
                                            {getFieldDecorator('r_confirmPassword', {
                                                rules: [
                                                    {required: true, message: '请再次输入您的密码!'},
                                                    {validator: this.checkPassword}
                                                ],
                                            })(
                                                <Input type="password" placeholder="请再次输入您的密码"/>
                                            )}
                                        </FormItem>
                                        <Button type="primary" htmlType="submit">提交</Button>
                                    </Form>
                                </TabPane>

                            </Tabs>
                        </Modal>
                    </Col>
                    <Col span={2}></Col>
                </Row>
            </header>
        )
    }
}

export default PCHeader = Form.create()(PCHeader)